<template>
  <div>

    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom:10px">
      <el-select style="width:100%" v-model="museumId" @change="change" filterable>
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </card>

    <el-tabs type="border-card">
      <el-tab-pane label="登记人员列表">
        <div class="flexCSB">
          <div>
            <Input 
              placeholder="请输入登记人员名称" 
              suffix="ios-search" 
              @on-change="changeName2" 
              v-model="name2" 
              style="width:200px;margin-right:10px"></Input>
            <DatePicker 
              :clearable="clearable" 
              format="yyyy-MM-dd" 
              type="daterange" 
              placeholder="请选择起止时间" 
              style="width: 300px;" 
              :value="time" 
              @on-change="onChange"></DatePicker>
          </div>
          <div>
            <Button type="primary" @click="download2" style="margin-right:10px" :loading="loading2">导出登记二维码</Button>
            <Button type="warning" @click="download4" style="margin-right:10px">导出登记海报</Button>
            <Button type="warning" @click="download42" style="margin-right:10px">导出嘉兴市登记海报</Button>
            <Button type="warning" @click="download44" style="margin-right:10px">秀洲区海报</Button>
                 <Button type="warning" @click="download43" style="margin-right:10px">南湖区海报</Button>
            <Button type="error" @click="download6" :loading="loading5">导出登记表格</Button>
          </div>
        </div>
        <Table class="table" :loading="loading1" highlight-row :columns="columns2" :data="data2"></Table>
        <Page show-total class="page" :total="total" :current.sync="current" show-elevator @on-change="changePage" />
      </el-tab-pane>
      <el-tab-pane label="字段配置">
        <el-card>
          <div slot="header" class="clearfix">
            <div style="display:flex;align-items: center;justify-content: space-between;">
              <span>已选字段</span>
              <div class="options">
                <div><span style="background-color:#03A181"></span>输入项</div>
                <div><span style="background-color:#67C23A"></span>判断项</div>
                <div><span style="background-color:#909399"></span>选择项</div>
                <div><span style="background-color:#F56C6C"></span>位置项</div>
                <div><span style="background-color:#E6A23C"></span>时间项</div>
                <div><span style="background-color:#909399"></span>层级项</div>
              </div>
            </div>
          </div>
          <el-tag effect="dark" type="" style="margin-right:10px;font-weight:bold">姓名</el-tag>
          <el-tag effect="dark" type="" style="margin-right:10px;font-weight:bold">手机号</el-tag>
          <el-tag effect="dark" type="" style="margin-right:10px;font-weight:bold">证件号</el-tag>
          <template v-for="(item,key) in list2">
            <el-tag 
              :value="item.value" 
              effect="dark"
              style="margin-right:10px;font-weight:bold;margin-bottom:10px" 
              :type="item.color" 
              @close="choose2(key)" 
              closable>{{item.name}}</el-tag>
          </template> 
        </el-card>
        <el-card style="margin-top:10px">
          <div slot="header" class="clearfix">
            <span>未选字段</span>
          </div>
          <template v-for="(item,key) in list1">
            <el-tag 
              effect="plain"
              :value="item.value" 
              @click="choose1(key)" 
              style="margin-right:10px;font-weight:bold;cursor: pointer;" 
              type="info">{{item.name}}</el-tag>
          </template> 
          <Button icon="ios-add" type="dashed" @click="handleAdd">添加自定义字段</Button>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="值班人员列表">
        <div class="flexCSB">
          <Input @on-change="changeName1" placeholder="请输入值班人员名称" suffix="ios-search" v-model="name1" style="width:400px"></Input>
          <Button type="primary" @click="download1" :loading="loading3">导出值班二维码</Button>
        </div>
        <Table class="table" :loading="loading1" highlight-row :columns="columns1" :data="data1"></Table>
      </el-tab-pane>
    </el-tabs>

    <Modal v-model="modal" title="查看二维码">
      <img style="width:100%" :src="url"></img>
      <div slot="footer">
        <Button type="success" class="Button" @click="download3" :loading="loading4">下载图片</Button>
      </div>
    </Modal>

    <Modal v-model="modal2" title="查看详情" width="70">
      <Form ref="form" :model="newData" :label-width="250">
        <Divider>固定字段</Divider>
        <FormItem label="登记者姓名："><p style="font-weight:bold">{{newData.name}}</p></FormItem>
        <FormItem label="登记者手机号："><p style="font-weight:bold">{{newData.phone}}</p></FormItem>
        <FormItem label="登记者身份证号："><p style="font-weight:bold">{{newData.card}}</p></FormItem>
        <!-- <FormItem label="登记者标识符："><p style="font-weight:bold">{{newData.openid}}</p></FormItem> -->
        <FormItem label="登记日期："><p style="font-weight:bold">{{newData.visitDate}}</p></FormItem>
        <FormItem label="登记时间："><p style="font-weight:bold">{{newData.visitTime}}</p></FormItem>
        <FormItem label="最近出行："><p style="font-weight:bold">{{newData.travelTrack}}</p></FormItem>
        <FormItem label="值班人员："><p style="font-weight:bold">{{newData.dutyOfficer}}</p></FormItem>
        <Divider>灵活字段</Divider>

        <template v-for="item in list2">
          <FormItem :label="item.name+'：'" v-if="newData.formData">
            <p style="font-weight:bold">{{ newData.formData[item.value] }}</p>
          </FormItem>
        </template>

      </Form>
      <div slot="footer"></div>
    </Modal>

    <Modal width="700" v-model="modal3" title="自定义字段">
      <Form ref="form" :model="newData2" :label-width="120">
        <FormItem label="中文字段名：">
          <Input placeholder="比如：姓名" v-model="newData2.name"></Input>
        </FormItem>
        <FormItem label="字段类型：">
          <el-radio-group size="small" v-model="newData2.type">
            <el-radio-button :label="1">输入项</el-radio-button>
            <el-radio-button :label="2">判断项</el-radio-button>
            <el-radio-button :label="3">选择项</el-radio-button>
            <el-radio-button :label="4">位置项</el-radio-button>
            <el-radio-button :label="5">时间项</el-radio-button>
            <el-radio-button :label="6">层级项</el-radio-button>
            <el-radio-button :label="7">国家项</el-radio-button>
          </el-radio-group>
        </FormItem>
        <FormItem v-if="newData2.type == 3" label="选择字段：">
          <Input placeholder="输入选项值，用 英文逗号 隔开" v-model="newData2.options"></Input>
        </FormItem>
        <FormItem v-if="newData2.type == 6" label="设置字段：">
          <Input placeholder="请输入层级一" v-model="cengji1">
            <Icon type="ios-add-circle" @click="addCengji" slot="suffix" />
          </Input>
          <Table size="small" :columns="columns" :data="tableData"></Table>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" class="Button" @click="submit">确认添加</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" fullscreen v-model="modal4" title="导出海报" width="1960">
      <div ref="codePage1" class="downloadDiv">
        <div class="downloadDivTitle">{{museumName}}</div>
        <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/visit2.jpg"></img>
        <!-- <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/visit.jpg"></img> -->
        <img class="downloadDivCode" :src="url"></img>
      </div>
      <div slot="footer">
        <Button type="success" class="Button" @click="download5">确认导出</Button>
      </div>
    </Modal>
     <Modal :mask-closable="false" fullscreen v-model="modal10" title="导出海报" width="1960">
      <div ref="codePage" class="downloadDiv2">
        <div class="downloadDivTitle2">{{museumName}}</div>
        <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/jiaixngwamgbatemplat2.jpg"></img>
        <!-- <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/visit.jpg"></img> -->
        <img class="downloadDivCode2" :src="url"></img>
      </div>
      <div slot="footer">
        <Button type="success" class="Button" @click="download52">确认导出</Button>
      </div>
    </Modal>


  <Modal :mask-closable="false" fullscreen v-model="modal11" title="导出海报" width="1960">
      <div ref="codePage2" class="downloadDiv3">
        <div class="downloadDivTitle2">{{museumName}}</div>
        <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/nanhuqu.jpg"></img>
        <!-- <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/visit.jpg"></img> -->
        <img class="downloadDivCode2" :src="url"></img>
      </div>
      <div slot="footer">
        <Button type="success" class="Button" @click="download53">确认导出</Button>
      </div>
    </Modal>

  <Modal :mask-closable="false" fullscreen v-model="modal12" title="导出海报" width="1960">
      <div ref="codePage3" class="downloadDiv4">
        <div class="downloadDivTitle2">{{museumName}}</div>
        <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/xiuzhouqu.jpg"></img>
        <!-- <img class="downloadDivMain" src="http://static.bowu66.com/wenlv/visit.jpg"></img> -->
        <img class="downloadDivCode2" :src="url"></img>
      </div>
      <div slot="footer">
        <Button type="success" class="Button" @click="download54">确认导出</Button>
      </div>
    </Modal>











    <Modal :mask-closable="false" v-model="modal5" title="新增层级二" width="50">
      <Input placeholder="请输入层级二" v-model="cengji2"></Input>
      <div slot="footer">
        <Button type="success" class="Button" @click="addER">确认添加</Button>
      </div>
    </Modal>


  </div>
</template>

<script>
import axios from "axios";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      clearable: true,
      modal: false,
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: false,
      modal10: false,
      modal11: false,
      modal12: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      current: 1,
      total: 0,
      name1: "",
      name2: "",
      museumId: "",
      museumName: "",
      url: "",
      columns1: [
        { title: "姓名", key: "dutyName", align: "center" },
        { title: "手机号码", key: "phone", align: "center" },
        { title: "openid", key: "openid", align: "center" },
      ],
      columns2: [
        { title: "姓名", key: "name", align: "center" },
        { title: "手机号码", key: "phone", align: "center" },
        { title: "身份证号", key: "card", align: "center" },
        { title: "参观日期", key: "visitDate", align: "center" },
        // { title: "参观时间", key: "visitTime", align: "center" },
        { title: "值班人员", key: "dutyOfficer", align: "center" },
        // { title: "出行记录", key: "travelTrack", align: "center" },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                  },
                  on: {
                    click: () => {
                      this.detailLook(params);
                    },
                  },
                },
                "查看详情"
              ),
            ]);
          },
        },
      ],
      list: [
        {
          name: "车牌号",
          value: "plateNum",
          type: 1,
          options: "",
        },
        {
          name: "来访事由",
          value: "visitingReason",
          type: 1,
          options: "",
        },
        {
          name: "体温",
          value: "temperature",
          type: 1,
          options: "",
        },
        {
          name: "受访人姓名",
          value: "respondentName",
          type: 1,
          options: "",
        },
      ],

      data1: [],
      museumList: [],
      time: [],
      list1: [],
      list2: [],
      data2: [],

      newData: {
        formData: {},
      },
      newData2: {
        name: "",
        type: 1,
        options: "",
      },
      columns: [
        {
          title: "层级一",
          key: "name1",
        },
        {
          title: "层级二",
          key: "name2",
          render: (h, params) => {
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover",
                  title: params.row.name2.length + "条数据",
                  placement: "right",
                },
              },
              [
                h("Tag", params.row.name2.length),
                h(
                  "div",
                  {
                    slot: "content",
                  },
                  [
                    h(
                      "ul",
                      this.tableData[params.index].name2.map((item) => {
                        return h(
                          "li",
                          {
                            style: {
                              textAlign: "center",
                              padding: "4px",
                            },
                          },
                          item
                        );
                      })
                    ),
                  ]
                ),
              ]
            );
          },
        },
        {
          title: "Action",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.createER(params.index);
                    },
                  },
                },
                "新增层级二"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.delER(params.index);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      tableData: [],

      cengji1: "",
      cengji2: "",
      cengjiIndex: "",
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.museumName = this.$store.state.museumName;
      this.loading1 = true;
      this.getVisitDutyOfficer();
      this.getVisitRegistration();
      this.getVisitFormConfigForBack();
    }
  },
  methods: {
    // 获取博物馆列表
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.museumName = this.museumList[0].name;
          this.getVisitDutyOfficer();
          this.getVisitRegistration();
          this.getVisitFormConfigForBack();
        } else {
          this.loading1 = false;
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 切换场馆
    change(data) {
      let museumName = "";
      for (let i = 0; i < this.museumList.length; i++) {
        if (this.museumList[i].id == data) {
          museumName = this.museumList[i].name;
          break;
        }
      }
      this.museumName = museumName;
      this.current = 1;
      this.getVisitDutyOfficer();
      this.getVisitRegistration();
      this.getVisitFormConfigForBack();
    },
    // 获取值班人员列表
    getVisitDutyOfficer() {
      this.$http(
        "/stage/visitorRegistration/getVisitDutyOfficer",
        {
          museumId: this.museumId,
          name: this.name1,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.loading1 = false;
            this.data1 = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
            this.loading1 = false;
          }
        }
      );
    },
    changeName2() {
      this.current = 1;
      this.getVisitRegistration();
    },
    onChange(data) {
      this.time = data;
      this.current = 1;
      this.getVisitRegistration();
    },
    changePage(data) {
      this.current = data;
      this.getVisitRegistration();
    },
    changeName1() {
      this.getVisitDutyOfficer();
    },
    // 获取登记人员列表
    getVisitRegistration() {
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      this.$http(
        "/stage/visitorRegistration/getVisitRegistration",
        {
          museumId: this.museumId,
          name: this.name2,
          start: start,
          end: end,
          current: this.current,
          size: 10,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.loading1 = false;
            this.data2 = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
            this.loading1 = false;
          }
        }
      );
    },
    // 获取字段列表
    getVisitFormConfigForBack() {
      this.$http(
        "/stage/visitorRegistration/getVisitFormConfigForBack",
        {
          museumId: this.museumId,
        },
        "get",
        (res) => {
          this.list1 = [];
          this.list2 = [];
          if (res.data.code == 200) {
            for (let j = 0; j < res.data.data.length; j++) {
              if (
                res.data.data[j].fieldDesc != "姓名" &&
                res.data.data[j].fieldDesc != "手机号" &&
                res.data.data[j].fieldDesc != "证件号"
              ) {
                let color = "";
                if (res.data.data[j].type == 1) {
                  color = "";
                }
                if (res.data.data[j].type == 2) {
                  color = "success";
                }
                if (res.data.data[j].type == 3) {
                  color = "info";
                }
                if (res.data.data[j].type == 4) {
                  color = "danger";
                }
                if (res.data.data[j].type == 5) {
                  color = "warning";
                }
                if (res.data.data[j].type == 6) {
                  color = "info";
                }
                this.list2.push({
                  name: res.data.data[j].fieldDesc,
                  value: res.data.data[j].fieldName,
                  type: res.data.data[j].type,
                  color: color,
                });
              }
            }

            this.list1 = this.list.filter((item) => {
              let idList = this.list2.map((v) => v.name);
              return !idList.includes(item.name);
            });
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    download1() {
      let that = this;
      that.loading3 = true;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportDutyOfficer",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          that.loading3 = false;
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.modal = true;
          that.url = url;
        })
        .catch((resp) => {
          that.loading3 = false;
          that.$Message.error("下载失败");
        });
    },
    download2() {
      let that = this;
      that.loading3 = true;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          that.loading3 = false;
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.modal = true;
          that.url = url;
        })
        .catch((resp) => {
          that.loading3 = false;
          that.$Message.error("下载失败");
        });
    },

    choose1(data) {
      this.$http(
        "/stage/visitorRegistration/updateVisitForm",
        {
          museumId: this.museumId,
          fieldDesc: this.list1[data].name,
          fieldName: this.list1[data].value,
          options: this.list1[data].options,
          type: this.list1[data].type,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.getVisitFormConfigForBack();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    choose2(data) {
      this.$http(
        "/stage/visitorRegistration/updateVisitForm",
        {
          museumId: this.museumId,
          fieldDesc: this.list2[data].name,
          fieldName: this.list2[data].value,
          type: this.list2[data].type,
          options: this.list2[data].options,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.getVisitFormConfigForBack();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    download3() {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
        const a = document.createElement("a"); // 生成一个a元素
        const event = new MouseEvent("click"); // 创建一个单击事件
        a.download = "文旅绿码"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.url;
    },
    // 查看详情
    detailLook(data) {
      this.modal2 = true;
      console.log(data.row);
      this.newData = data.row;
    },
    // 导出海报
    download4() {
      this.modal4 = true;
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.url = url;
        })
        .catch((resp) => {
          that.$Message.error("下载失败");
        });
    },
    // 确认导出
    download5() {
      var that = this;
      let shareContent = this.$refs.codePage1, //需要截图的包裹的（原生的）DOM 对象
        width = shareContent.clientWidth, //shareContent.offsetWidth; //获取dom 宽度
        height = shareContent.clientHeight, //shareContent.offsetHeight; //获取dom 高度
        canvas = document.createElement("canvas"), //创建一个canvas节点
        scale = 1; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true,
      };
      html2canvas(shareContent, opts)
        .then(function (canvas) {
          console.log(canvas);
          var url = canvas.toDataURL("image/png", 100);
          console.log(url);
          let elink = document.createElement("a");

          elink.download = "访客登记海报.png";
          elink.style.display = "none";

          let blob = that.dataURLtoBlob(url);

          elink.href = URL.createObjectURL(blob);

          document.body.appendChild(elink);
          elink.click();
          that.modal4 = false;
          document.body.removeChild(elink);
        })
        .catch(function (reason) {
          that.$Message.error("下载失败");
          console.log(reason);
        });
    },
    // 导出海报
    download42() {
      this.modal10 = true;
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.url = url;
        })
        .catch((resp) => {
          that.$Message.error("下载失败");
        });
    },
    // 导出海报
    download43() {
      this.modal11 = true;
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.url = url;
        })
        .catch((resp) => {
          that.$Message.error("下载失败");
        });
    },
    download44() {
      this.modal12 = true;
      let that = this;
      axios({
        method: "get",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorQRCode",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "arraybuffer",
        params: {
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          let url =
            "data:image/PNG;base64," + that.ArrayBufferToBase64(res.data);
          that.url = url;
        })
        .catch((resp) => {
          that.$Message.error("下载失败");
        });
    },
    // 确认导出
    download54() {
      var that = this;
      let width,height,canvas,scale;
      let shareContent = that.$refs.codePage3; //需要截图的包裹的（原生的）DOM 对象
      console.log(shareContent.clientWidth);
      width = shareContent.clientWidth, //shareContent.offsetWidth; //获取dom 宽度
      console.log(width)
        height = shareContent.clientHeight, //shareContent.offsetHeight; //获取dom 高度
        canvas = document.createElement("canvas"), //创建一个canvas节点
        scale = 1; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true,
      };
      html2canvas(shareContent, opts)
        .then(function (canvas) {
          var url = canvas.toDataURL("image/png", 100);
          console.log(canvas);
          let elink = document.createElement("a");
          elink.download = "秀洲区海报.png";
          elink.style.display = "none";
          let blob = that.dataURLtoBlob(url);
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          that.modal12 = false;
          console.log(that.modal12)
          document.body.removeChild(elink);
        })
        .catch(function (reason) {
          that.$Message.error("下载失败");
          console.log(reason);
        });
    },
    // 确认导出
    download53() {
      var that = this;
         let width,height,canvas,scale;
      let shareContent = that.$refs.codePage2; //需要截图的包裹的（原生的）DOM 对象
      console.log(shareContent.clientWidth);
      (width = shareContent.clientWidth), //shareContent.offsetWidth; //获取dom 宽度
        (height = shareContent.clientHeight), //shareContent.offsetHeight; //获取dom 高度
        (canvas = document.createElement("canvas")), //创建一个canvas节点
        (scale = 1); //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true,
      };
      html2canvas(shareContent, opts)
        .then(function (canvas) {
          var url = canvas.toDataURL("image/png", 100);
          console.log(canvas);
          let elink = document.createElement("a");
          elink.download = "南湖区海报.png";
          elink.style.display = "none";
          let blob = that.dataURLtoBlob(url);
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          that.modal11 = false;
          document.body.removeChild(elink);
        })
        .catch(function (reason) {
          that.$Message.error("下载失败");
          console.log(reason);
        });
    },

    // 确认导出
    download52() {
      var that = this;
      let shareContent = that.$refs.codePage, //需要截图的包裹的（原生的）DOM 对象
        width = shareContent.clientWidth, //shareContent.offsetWidth; //获取dom 宽度
        height = shareContent.clientHeight, //shareContent.offsetHeight; //获取dom 高度
        canvas = document.createElement("canvas"), //创建一个canvas节点
        scale = 1; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true,
      };
      html2canvas(shareContent, opts)
        .then(function (canvas) {
          var url = canvas.toDataURL("image/png", 100);
          console.log(canvas);
          let elink = document.createElement("a");
          elink.download = "嘉兴市登记海报.png";
          elink.style.display = "none";
          let blob = that.dataURLtoBlob(url);
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          that.modal10 = false;
          document.body.removeChild(elink);
        })
        .catch(function (reason) {
          that.$Message.error("下载失败");
          console.log(reason);
        });
    },

    // 添加自定义字段
    handleAdd() {
      this.modal3 = true;
      this.newData2 = {
        name: "",
        type: 1,
        options: "",
      };
    },
    // 自定义字段 提交
    submit() {
      if (!this.newData2.name) {
        this.$Message.error("请输入中文字段名");
        return false;
      }
      let num = new Date().getTime().toString();
      let num2 = num.slice(num.length - 5, num.length - 1);
      let str = this.randomStr(10, "abcdefghijklmnopqrstuvwxyz");
      let str2 = str + num2;
      let options = "";
      if (this.newData2.type == 6) {
        if (!this.tableData.length) {
          this.$Message.error("请录入层级");
          return false;
        }
        options = JSON.stringify(this.tableData);
      } else {
        options = this.newData2.options;
      }
      this.list1.push({
        name: this.newData2.name,
        type: this.newData2.type,
        options: options,
        value: str2,
      });
      this.tableData = [];
      this.choose1(this.list1.length - 1);
      this.modal3 = false;
    },
    download6() {
      let start = "",
        end = "";
      if (this.time[0] != "" && this.time[1] != "") {
        start = this.time[0];
        end = this.time[1];
      }
      if (!start) {
        this.$Message.error("请选择起止时间");
        return false;
      }
      this.loading5 = true;
      let that = this;
      axios({
        method: "post",
        url: this.baseUrl + "/stage/visitorRegistration/exportVisitorRegister",
        headers: {
          token: this.$store.state.token || localStorage.getItem("token") || "",
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: "blob",
        data: {
          start: start,
          end: end,
          museumId: this.museumId,
        },
      })
        .then(function (res) {
          that.loading5 = false;
          // let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);
          var data = res.data;
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(data); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURI(
            res.headers["content-disposition"].split("filename=")[1]
          );
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch((resp) => {
          that.loading5 = false;
          that.$Message.error("下载失败");
        });
    },
    addCengji() {
      if (!this.cengji1) {
        this.$Message.error("不能为空");
        return false;
      }
      this.tableData.push({
        name1: this.cengji1,
        name2: [],
      });
      this.cengji1 = "";
    },
    createER(data) {
      this.cengjiIndex = data;
      this.modal5 = true;
      this.cengji2 = "";
    },
    addER() {
      if (!this.cengji2) {
        this.$Message.error("不能为空");
        return false;
      }
      this.tableData[this.cengjiIndex].name2.push(this.cengji2);
      this.cengji2 = "";
      this.modal5 = false;
    },
    delER(data) {
      this.tableData.splice(data, 1);
    },
  },
};
</script>

<style scoped>
.downloadDiv {
  width: 1929px;
  height: 2717px;
  position: relative;
}
.downloadDiv2 {
  width: 1929px;
  height: 2717px;
  position: relative;
  display: flex;
  justify-content: center;
}
.downloadDiv4 {
  width: 1929px;
  height: 2717px;
  position: relative;
  display: flex;
  justify-content: center;
}
.downloadDiv3 {
  width: 1929px;
  height: 2717px;
  position: relative;
  display: flex;
  justify-content: center;
}
.downloadDivMain {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.downloadDivCode {
  width: 690px;
  height: 690px;
  position: absolute;
  top: 825px;
  left: 50%;
  margin-left: -345px;
  z-index: 2;
}
.downloadDivCode2 {
  width: 690px;
  height: 690px;
  position: absolute;
  top: 958px;
  left: 50%;
  margin-left: -345px;
  z-index: 2;
}
.downloadDivTitle {
  width: 800px;
  height: 100px;
  background-color: rgba(138, 139, 140, 1);
  position: absolute;
  top: 618px;
  left: 50%;
  margin-left: -400px;
  z-index: 2;
  color: white;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.downloadDivTitle2 {
  height: 100px;
  padding: 0 65px;
  background-color: rgba(138, 139, 140, 1);
  position: absolute;
  top: 580px;

  z-index: 2;
  color: white;
  font-size: 83px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.options {
  display: flex;
}
.options div {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.options div span {
  width: 10px;
  margin-right: 5px;
  border-radius: 10px;
  height: 10px;
}
</style>